<template>
  <div class="records-container">
    <a-card>
      <template #title>抽奖记录</template>

      <a-form layout="inline" class="search-form">
        <a-form-item label="手机号">
          <a-input
            v-model:value="searchForm.phone"
            placeholder="请输入手机号"
            allow-clear
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <template #icon><SearchOutlined /></template>
            搜索
          </a-button>
        </a-form-item>
      </a-form>

      <a-table
        :columns="columns"
        :data-source="records"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'prizeValue'">
            ¥{{ record.prizeValue }}
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import type { TablePaginationConfig } from 'ant-design-vue'
import { lotteryApi } from '../api/lottery'
import type { ApiResponse, PageResult } from '../types/api'

interface Record {
  id: number
  userId: number
  phone: string
  prizeId: number
  prizeName: string
  prizeValue: number
  createTime: string
}

interface SearchForm {
  phone: string
}

const columns = [
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '奖品名称',
    dataIndex: 'prizeName',
    key: 'prizeName'
  },
  {
    title: '奖品价值',
    dataIndex: 'prizeValue',
    key: 'prizeValue'
  },
  {
    title: '抽奖时间',
    dataIndex: 'createTime',
    key: 'createTime'
  }
]

const records = ref<Record[]>([])
const loading = ref(false)

const searchForm = reactive<SearchForm>({
  phone: ''
})

const pagination = reactive<TablePaginationConfig>({
  total: 0,
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`
})

const loadRecords = async () => {
  loading.value = true
  try {
    const res = await lotteryApi.getRecords({
      current: pagination.current || 1,
      size: pagination.pageSize || 10,
      phone: searchForm.phone
    })
    records.value = res.data.records
    pagination.total = res.data.total
  } catch (error) {
    message.error('获取抽奖记录失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.current = 1
  loadRecords()
}

const handleTableChange = (pag: TablePaginationConfig) => {
  if (pag.current) pagination.current = pag.current
  if (pag.pageSize) pagination.pageSize = pag.pageSize
  loadRecords()
}

onMounted(() => {
  loadRecords()
})
</script>

<style scoped>
.records-container {
  padding: 24px;
  height: 100%;
}

.search-form {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

:deep(.ant-card) {
  height: 100%;
}

:deep(.ant-card-body) {
  height: calc(100% - 57px);
  display: flex;
  flex-direction: column;
}

:deep(.ant-table-wrapper) {
  flex: 1;
  overflow: auto;
}

:deep(.ant-table) {
  height: 100%;
}

:deep(.ant-table-container) {
  height: 100%;
}

:deep(.ant-table-body) {
  height: calc(100% - 39px) !important;
}
</style> 